<script setup>
    import { reactive,onMounted,computed } from 'vue'
    import api from '../../api'

    import MessageTitle from '../FunUnit/MessageTitleComponent.vue';


    // 评论信息
    let commentDate = reactive({
        commentItem : [],
    })

    // 清空所有评论
    function clearMesg(){
        commentDate.commentItem = []
        ElMessage({
            message: '已清空！',
            type: 'success',
        })
    }
    // 判断列表是否为空
    const si_true = computed(() => {
        return commentDate.commentItem.length === 0 ? true : false
    })

    // 确认则删除
    const confirmEvent = (id) => {
        delComment(id)
        // 删除成功提示
        ElMessage({
            message: '删除成功！',
            type: 'success',
        })
    }
    
    // 删除一条评论
    function delComment(id){
        commentDate.commentItem = commentDate.commentItem.filter( item =>  item.id !== id)
    }

    // 获取头像地址
    const getImageUrl = (name) => {
        return new URL(`../../assets/${name}`, import.meta.url).href
    }

    
    onMounted(() => {
        api.get_article().then(data => {
            commentDate.commentItem = data.comment
        })
    })
</script>

<template>
  <div class="comment">
    <MessageTitle get-title="评论" @clearMesg="clearMesg()"></MessageTitle>
    <div class="contents">
        <el-empty v-if="si_true" description="空空如也" />
        <ul v-if="!si_true"  class="infinite-list" style="overflow: auto">
            <li v-for="i in commentDate.commentItem" :key="i.id" class="infinite-list-item">
                <div class="left">
                    <!-- 动态渲染头像地址 -->
                    <el-avatar :size="50" :src="getImageUrl(i.headImg)" />
                    <!-- 评论信息 -->
                    <div class="center">
                        <div class="top">
                            {{ i.author }}
                            <span>评论了你的博文</span>
                        </div>
                        <div class="comment_info">
                            <h4>{{ i.replyInfo }}</h4>
                        </div>
                        <div class="bottom_title">
                            {{ i.replyTitle }}
                            <span :tabindex="i.id"><b></b>点赞</span>

                    </div>
                </div>
                </div>
                <!-- 评论时间 -->
                <div class="right">
                    <!-- 删除 -->
                    <el-popconfirm
                        width="20"
                        confirm-button-text="OK"
                        cancel-button-text="No"
                        title="确定要删除吗？"
                        @confirm="confirmEvent(i.id)"
                    >
                        <template #reference>
                        <el-button>
                            <el-icon class="del" ><Delete /></el-icon>
                        </el-button>
                        </template>
                    </el-popconfirm>
                    
                    <span>{{ i.replyTime }}</span>
                </div>
            </li>
        </ul>
    </div>
  </div>
</template>

<style lang="less" scoped>
    .comment{
        .contents{
            .infinite-list{
                height: 550px;
            }
            li {
                display: flex;
                padding: 20px 6px;
                margin: 0 auto;
                width: 96%;
                height: 120px;
                .left{
                    display: flex;
                    margin:0 20px;
                    .el-avatar--circle{
                        cursor: pointer;
                    }
                    .center {
                        margin-left: 10px;
                        line-height: 30px;
                        .top{
                            span{
                                margin-left: 20px;
                                font-size: 12px;
                                color: #8799a3;
                            }
                        }
                        .comment_info {
                            display: flex;
                            justify-content: space-between;
                            margin-bottom: 10px;
                            h4{
                                margin-right: 50px;
                                font-weight: normal;
                                font-size: 14px;
                                color: #515767;
                            }
                        }
                        .bottom_title{
                            position: relative;
                            cursor: pointer;
                            font-size: 0.6rem;
                            color: #8799a3;
                            span{
                                position: absolute;
                                right: 120px;
                                bottom: -2px;
                                b{
                                    position: absolute;
                                    right: 30px;
                                    top: 6px;
                                    width: 16px;
                                    height: 16px;
                                    background-image: url('../../assets/icon/dianzan.png');
                                }
                            }
                            span:focus b{
                                    background-image: url('../../assets/icon/dianzan_1.png');
                            }
                        }
                }
                }
                .right {
                    color: #999;
                    font-size: 14px;
                    .el-button{
                        display: flex;
                        width: 100px;
                        border: none;
                        .comment .contents li .right .del[data-v-19e4945f]{
                            margin-left: 0;
                        }
                    }
                  
                    .el-button:hover{
                        color: #FC9D99;
                        background-color: #fff;
                    }
                    .el-button:focus{
                        color: #2C3E50;
                        background-color: #fff;
                    }
                    .del{
                        margin-left: 60px;
                        margin-bottom: 20px;
                        display: block;
                        font-size: 16px;
                        cursor: pointer;
                    }
                    
                }
                
            }
        }
    }
</style>

<style>
.comment .contents li .right .del[data-v-19e4945f]{
    margin: 0;
}
</style>
